<template>
  <div class="bargain views-container">
    <div class="wlm-table">
        <div class="wlm-table-header">
               <div class="flex-row" style="display:flex; align-items:center;">
                            <img width="50" height="50" :src="avatarUrl?avatarUrl:''" style="margin-right:10px;" />
                            <div >
                                <p>{{nickName}}</p>
                            </div>
                             <p style="margin-left:20px;">{{create_time}}</p>
                </div>
        </div>
        <div class="wlm-table-content">
                    <el-table :data="tableFormatData" style="width: 100%">
                     <el-table-column
                        label="类型">
                         <template slot-scope="scope">
                           <span v-if="scope.row.field_type==1">单行文本</span>
                           <span v-if="scope.row.field_type==2">多行文本</span>
                           <span v-if="scope.row.field_type==3">身份证号码</span>
                           <span v-if="scope.row.field_type==4">下拉框</span>
                           <span v-if="scope.row.field_type==5">多选框</span>
                           <span v-if="scope.row.field_type==6">单选框</span>
                           <span v-if="scope.row.field_type==7">日期</span>
                           <span v-if="scope.row.field_type==8">日期范围</span>
                           <span v-if="scope.row.field_type==9">时间</span>
                           <span v-if="scope.row.field_type==10">时间范围</span>
                           <span v-if="scope.row.field_type==11">城市</span>
                           <span v-if="scope.row.field_type==12">图片</span>
                         </template>
                      </el-table-column>
                       <el-table-column
                        prop="name"
                        label="标题">
                         <template slot-scope="scope">
                           <!-- <div v-if="scope.row."></div> -->
                           <div v-if="scope.row.field_type==8 || scope.row.field_type==10">
                               {{scope.row.name.startname}}{{scope.row.name.endname}}
                           </div>
                           <div v-else>{{scope.row.name}}</div>
                         </template>
                      </el-table-column>
                      <el-table-column
                        prop="value"
                        label="内容">
                        <template slot-scope="scope">
                          <div v-if="scope.row.field_type==12">
                              <div v-for="(item,index) in scope.row.value" :key="index">
                                <img width="50" height="50" :src="item.url?item.url:''">
                              </div>
                          </div>
                          <div v-else>{{scope.row.value}}</div>
                        </template>
                      </el-table-column>
                  </el-table>

              </div>
    </div>
  </div>
</template>
<script>
import {
  submitDetail
} from '@/api/merchant'
export default {
  name: 'Detail',
  data() {
    return {
      avatarUrl: '',
      create_time: '',
      nickName: '',
      tableFormatData: []
    }
  },
  created() {
    this.tableFormbtn()
  },
  methods: {
    tableFormbtn() {
      submitDetail({ id: this.$route.query.id }).then(res => {
        const { data: { data: { avatarUrl, create_time, nickName, value } } } = res
        console.log("444444444444",value)
        this.tableFormatData = value
        this.avatarUrl = avatarUrl
        this.create_time = create_time
        this.nickName = nickName
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
